<template>
    <view class="lease-return-detail">
        <!-- 状态 -->
        <view class="header">
            <view class="row">
                <u-icon name="clock-fill" size="46" />
                <text class="lg ml10">{{ statusMap[orderStatus].name }}</text>
            </view>
            <view class="sm mt20">{{ statusMap[orderStatus].hint }}</view>
        </view>

        <view class="main">
            <!-- 商品 -->
            <view class="container goods">
                <view class="goods-title">商品信息</view>
                <lease-order-goods :image="goodsInfo.image">
                    <template #name>{{ goodsInfo.goods_name }}</template>
                    <template #specs>
                        {{ goodsInfo.spec_value_str }}， {{ goodsInfo.periods
                        }}{{ getPeriodsUnit(goodsInfo.periods_attribute) }}
                    </template>
                    <template #price>
                        <price
                            :content="priceDayRent"
                            mainSize="38rpx"
                            minorSize="24rpx"
                            color="#333333"
                            :isPrefix="true"
                            :isSuffix="true"
                        />
                        <text>（x{{ goodsInfo.periods }}期）</text>
                    </template>
                </lease-order-goods>
            </view>

            <!-- 资金明细 -->
            <template v-if="amountInfo">
                <view class="container nr normal">
                    <view class="row-between">
                        <view @tap="goBill">
                            <text>已还账单金额</text>
                            <u-icon class="ml5" name="question-circle" color="#999999" />
                        </view>
                        <view>¥{{ amountInfo.periodization_pay_amount }}</view>
                    </view>
                    <view class="row-between mt10">
                        <view @tap="isShowFalsifyPriceModal = true">
                            <text>违约金</text>
                            <u-icon class="ml5" name="question-circle" color="#999999" />
                        </view>
                        <view class="ornament">¥{{ amountInfo.falsify_price }}</view>
                    </view>
                </view>
            </template>

            <!-- 寄件地址 -->
            <!-- <template v-if="addressInfo">
				<view class="container address">
					<view class="address-title">寄件地址</view>
					<view class="address-content">
						<view class="address-contact">
							<text>{{ addressInfo.consignee }}</text>
							<text class="ml10">{{ addressInfo.telephone }}</text>
						</view>
						<view class="address-site">{{ addressInfo.address }}</view>
					</view>
				</view>				
			</template> -->

            <!-- 收件地址 -->
            <view class="container address">
                <view class="address-title">收件地址</view>
                <view class="address-content">
                    <view class="address-contact">
                        <text>{{ receivingAddress.platform_name }}</text>
                        <text class="ml10">{{ receivingAddress.platform_mobile }}</text>
                    </view>
                    <view class="address-site">{{ receivingAddress.platform_address }}</view>
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="container">
                <!-- 付款方式 -->
                <view class="info-item">
                    <view class="info-item-label">付款方式</view>
                    <view class="info-item-content">{{ getPayWayName(orderInfo.pay_way) }}</view>
                </view>
                <!-- 订单编号 -->
                <view class="info-item">
                    <view class="info-item-label">订单编号</view>
                    <view class="info-item-content">{{ orderInfo.order_sn }}</view>
                </view>
                <!-- 下单时间 -->
                <view class="info-item">
                    <view class="info-item-label">下单时间</view>
                    <view class="info-item-content">{{ orderInfo.create_time }}</view>
                </view>
                <!-- 快递单号 -->
                <template v-if="expressInfo">
                    <view class="info-item">
                        <view class="info-item-label">快递单号</view>
                        <view class="info-item-content">
                            <view>{{ expressInfo.express_name }}</view>
                            <view @tap="copyText(expressInfo.express_sn)">
                                <text>{{ expressInfo.express_sn }}</text>
                                <u-icon class="ml10" name="file-text" />
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </view>

        <!-- Fixed -->
        <view class="fixed" v-if="orderStatus == 1 || orderStatus == 2">
            <template v-if="orderStatus == 1">
                <view class="button--express" @tap="goEditExpress">填写单号</view>
            </template>
            <template v-if="orderStatus == 2">
                <view class="button--express" @tap="goExpressProgress">查看物流</view>
            </template>
        </view>

        <!-- 违约金 说明 -->
        <u-modal v-model="isShowFalsifyPriceModal" title="说明" confirm-text="我知道了">
            <view class="desc-container">
                <text class="desc-title">违约金：</text>
                <text>您当前租期未到期，提前还机需支付相应的违约金</text>
            </view>
        </u-modal>
    </view>
</template>

<script>
import { leaseReturnDetail } from '@/api/lease'
import { copy } from '@/utils/tools'

export default {
    data() {
        return {
            addressInfo: {}, // 寄件地址
            receivingAddress: {}, // 收件地址
            goodsInfo: {}, // 商品信息
            orderID: '', // 租赁订单ID
            orderInfo: {}, // 订单信息
            amountInfo: {}, // 支付金额信息
            expressInfo: {}, // 快递信息
            priceDayRent: 0, // 每日租赁价格
            orderStatus: 0, // 订单状态

            statusMap: {
                0: {
                    name: '未还机',
                    hint: ''
                },
                1: {
                    name: '待寄出',
                    hint: '订单已提交，请及时寄出商品'
                },
                2: {
                    name: '等待返款',
                    hint: '商品已寄出，等待商家返款'
                },
                3: {
                    name: '已完成',
                    hint: '还机完成'
                }
            },

            isShowFalsifyPriceModal: false // 违约金Modal
        }
    },

    methods: {
        // 输出分期单位
        getPeriodsUnit(value) {
            switch (value) {
                case 'is_week':
                    return '周'
                case 'is_month':
                    return '个月'
            }
        },

        // 支付名称
        getPayWayName(payway) {
            switch (payway) {
                // 微信支付
                case 1:
                    return '微信支付'
                // 支付宝支付
                case 2:
                    return '支付宝支付'
                // 余额支付
                case 3:
                    return '余额支付'
            }
        },

        // 填写物流信息
        goEditExpress() {
            uni.navigateTo({
                url: `/bundle/pages/lease_return_express/lease_return_express?id=${this.orderID}`
            })
        },

        // 查看物流进度
        goExpressProgress() {
            uni.navigateTo({
                url: `/bundle/pages/lease_return_express_progress/lease_return_express_progress?id=${this.orderID}`
            })
        },

        // 复制文本
        copyText(value) {
            copy(value)
        },

        // 跳转到账单页面
        goBill() {
            uni.navigateTo({
                url: '/bundle/pages/lease_bill/lease_bill?id=' + this.orderID
            })
        }
    },

    onLoad(options) {
        const id = options.id
        this.orderID = id
    },

    onShow() {
        leaseReturnDetail({ id: this.orderID }).then((res) => {
            if (res.code != 1) return
            const data = res.data

            this.addressInfo = data.address_info || null
            this.receivingAddress = data.receiving_address
            this.goodsInfo = data.goods_info
            this.orderInfo = data.order_info
            this.orderStatus = data.order_info.return_status
            this.amountInfo = data.amount_info || null
            this.expressInfo = data.express_info || null

            switch (this.goodsInfo.periods_attribute) {
                case 'is_week':
                    this.priceDayRent = (this.goodsInfo.issue_rent / 7)
                        .toString()
                        .match(/^\d+(?:\.\d{0,2})?/)
                    break
                case 'is_month':
                    this.priceDayRent = (this.goodsInfo.issue_rent / 30)
                        .toString()
                        .match(/^\d+(?:\.\d{0,2})?/)
                    break
            }
        })
    }
}
</script>

<style scoped>
.container {
    margin-top: 20rpx;
    padding: 20rpx;
    border-radius: 7px;
    background-color: #ffffff;
}

.lease-return-detail {
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200rpx;
    padding: 0 50rpx;
    background-image: linear-gradient(90deg, #24a3ff, #3187fd);
    color: #ffffff;
}

.main {
    padding: 20rpx;
}

.goods-title {
    margin-bottom: 10rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
}

.address {
    display: flex;
}

.address-title {
    min-width: 146rpx;
    font-size: 28rpx;
    color: #999999;
}

.address-contact {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
}

.address-site {
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #666666;
}

.info-item {
    display: flex;
}

.info-item:nth-child(n + 2) {
    margin-top: 20rpx;
}

.info-item-label {
    min-width: 146rpx;
    font-size: 28rpx;
    color: #999999;
}

.fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100rpx;
    padding: 0 20rpx;
    border-radius: 5px 5px 0 0;
    background-color: #ffffff;
}

.button--express {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188rpx;
    height: 68rpx;
    border: 1px solid #24a3ff;
    border-radius: 50px;
    margin-left: auto;
    font-size: 28rpx;
    color: #24a3ff;
}

.desc-container {
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    color: #333333;
}

.desc-title {
    font-weight: 500;
    margin-right: 10rpx;
}
</style>
